<template>
  <div class="pagebox">
    <img class="img" @click="showPopup()" src="../../static/selectDown.png" alt />
    <sel
      @radioChange="radioChange"
      @toNext="toNext"
      @input="input($event,index)"
      @input_in="input_in"
      @toYes="toYes"
      @toNo="toNo"
      @getImg="getImg"
      @delImg="delImg"
      :sel_data="sel_data[index][select]"
      :tip="tip[index]"
      :sel_index="index"
      :imgs="imgs"
    ></sel>
    <uni-popup
      class="u_p ice"
      :show="type === 'top'"
      position="top"
      mode="fixed"
      msg
      @hidePopup="togglePopup('')"
    >
      <div class="ice_box">
        <navigator @click="selectIce(index)" :class="{'active app_col':index==selectIndex}" class="ice_it rpx28 col282" v-for="(item,index) in sel_data[1]" :key="index">
          冷风柜{{index+1}}
          <img class="ice_del" src="../../static/q3.png" />
        </navigator>
        <navigator class="ice_add rpx32 colB3B" @click="toYes">
          <img class="ice_del" src="../../static/q4.png" />添加冷风柜
        </navigator>
      </div>
    </uni-popup>
    <uni-popup class="u_p" :show="type === 'topRight'" position="top" mode="fixed" msg="" @hidePopup="togglePopup('')" >
			<div class="u_p_box">
          <p  class="u_p_back rpx26 app_col" @click="toAnywhere(1)"><span style="width: 10upx;"></span>返回上传列表</p>
        <div v-if="index<4">
          <p  class="rpx28 app_col" @click="toAnywhere(2)">* Q17.<text class="rpx28 col282">冷风柜有几层。</text></p>
          <p class="rpx28 app_col" @click="toAnywhere(3)">* Q18.<text class="rpx28 col282">冷风柜需统计产品总陈列面数（只记录可以在常温下摆放的产品陈列面数，如牛奶. 酸奶. 味全每日C等只能冷藏的产品不收集）。</text></p>
          <p  class="rpx28 app_col" @click="toAnywhere(4)">* Q19.<text class="rpx28 col282">分厂商陈列面数(只记录可以在常温下摆放的产品陈列面数，如牛奶. 酸奶. 味全每日C等只能冷藏的产品不收集）。</text></p>
				</div>
        <div v-else>
          <p class="rpx28 app_col" @click="toAnywhere(5)">* Q22.<text class="rpx28 col282">请拍一个陈列的整体图片。。</text></p>
          <p  class="rpx28 app_col" @click="toAnywhere(6)">* Q23.<text class="rpx28 col282">该陈列所属类型。</text></p>
          <p  class="rpx28 app_col" @click="toAnywhere(7)">* Q24.<text class="rpx28 col282">该陈列摆放的位置。</text></p>
          <p class="rpx28 app_col" @click="toAnywhere(8)">* Q26.<text class="rpx28 col282">该陈列分厂商分品类的面积（平方米）。</text></p>
        </div>
			</div>
		</uni-popup>
  </div>
</template>

<script>
import mixins from "@/mixins";
import sel from "../../components/sel/index.vue";
import uniPopup from "../../components/uni-popup/uni-popup.vue";
import { mapState } from "vuex";
export default {
  components: { sel,uniPopup },
  data() {
    return {
      index: 0,
      tip: [
        { key: "* Q16.", tip: "请查看该店铺是否有冷风柜？(必答题)" },
        { key: "* Q17.", tip: "冷风柜有几层" },
        {
          key: "* Q18.",
          tip:
            "冷风柜需统计产品总陈列面数（只记录可以在常温下摆放的产品陈列面数，如牛奶. 酸奶. 味全每日C等只能冷藏的产品不收集）",
          tip2: "这一列只能填写整型值。"
        },
        {
          key: "* Q19.",
          tip:
            "分厂商陈列面数(只记录可以在常温下摆放的产品陈列面数，如牛奶. 酸奶. 味全每日C等只能冷藏的产品不收集）",
          tip3: "总和必须等于2。"
        },
        {
          key: "* Q21.",
          tip:
            "请查看该店铺是否有二次陈列？这里的二次陈列包括堆头、堆箱、端架、陈列架、冰爽站等。（单选）"
        },
        { key: "* Q22.", tip: "请拍一个陈列的整体图片。" },
        { key: "* Q23.", tip: "该陈列所属类型" },
        { key: "* Q24.", tip: "该陈列摆放的位置" },
        { key: "* Q25.", tip: "该陈列的总面积（平方米）" }
      ],
      sel_data: [
        [
          {
            type: "radio",
            item: [],
            value: 2
          }
        ],
        [
          {
            type: "input",
            item: [{ name: "层数", type: "number" }],
            value: "层数"
          }
        ],
        [
          {
            type: "input",
            item: [{ name: "整型值", type: "number" }],
            value: ""
          }
        ],
        [
          {
            type: "input_in",
            item: []
          }
        ],
        [
          {
            type: "radio",
            item: [],
            value: 2
          }
        ],
        [
          {
            type: "img",
            item: []
          }
        ],
        [
          {
            type: "radio",
            item: [
              { name: "堆头" },
              { name: "端架" },
              { name: "冰爽站" },
              { name: "堆箱（仅mini超市记录）" }
            ]
          }
        ],
        [
          {
            type: "radio",
            item: [
              { name: "入口处促销区" },
              { name: "饮料区主通道" },
              { name: "饮料区非主通道" },
              { name: "收银区" },
              {
                name: "其他（请注明：__）",
                qt: [{ type: "textarea", item: [{ name: "请注明" }] }]
              }
            ]
          }
        ],
        [
          {
            type: "input",
            item: [{ name: "平方米", type: "number" }]
          }
        ]
      ],
      question: [],
      imgs: [],
      back: "",
      shopId: 0,
      catId: 0,
      select: 0,
      type:'',
      selectIndex:-1
    };
  },
  onNavigationBarButtonTap(){
			if(this.type==''){
				this.type='topRight'
			}else{
				this.type=''
			}
		},
  onLoad(e) {
    let _that = this;
    _that.select = e.select;
    if (e.index == 4) {
      _that.index = +e.index;
      _that.back = e.index;
    }
    _that.shopId = e.shopId;
    _that.catId = e.catId;
    this.getMessage();
    //处理循环添加数据
    if((+e.select+1)!= _that.sel_data[0].length){
      uni.getStorage({//Q21
        key: "question",
        success: res => {
          _that.sel_data[4].push({
              type: "radio",
              item: res.data[18].item,
              value: 2
          })
        }
      })
      _that.sel_data[5].push({//Q22
        type: "img",
        item: []
      })
      uni.getStorage({//Q23
        key: "question",
        success: res => {
          _that.sel_data[6].push({
            type: "radio",
            item: res.data[20].item
          })
        }
      })
      uni.getStorage({//Q24
        key: "question",
        success: res => {
          _that.sel_data[7].push({
            type: "radio",
            item: res.data[21].item
          })
        }
      })
      
      // uni.getStorage({//Q25
      //   key: "question",
      //   success: res => {
      //     _that.sel_data[8].push({
      //         type: "radio",
      //         item: res.data[18].item,
      //         value: 2
      //     })
      //   }
      // })
    }
  },
  onBackPress(options) {
    if (this.index == 0) {
      return false;
    } else {
      if (this.back == 4) {
        return false;
      }
      this.index--;
      return true;
    }
    return false;
  },
  computed: {
    // ...mapState(["storeId"]),
    // ...mapState(["catId"])
  },
  methods: {
    toAnywhere(index){
				if(index == 1){
					mixins.navigate('../index/lixian_steps?shopId='+this.shopId+'&catId='+this.catId);
				}else if(index ==2){
          this.type = ''
					this.index = 1
				}else if(index ==3){
          this.type = ''
					this.index = 2
				}else if(index ==4){
          this.type = ''
					this.index = 3
				}else if(index ==5){
					this.type = ''
					this.index = 5
				}else if(index ==6){
					this.type = ''
					this.index = 6
				}else if(index ==7){
					this.type = ''
					this.index = 7
				}else if(index ==8){
          this.type = ''
					mixins.navigate("q26?shopId=" + this.shopId + "&catId=" + this.catId+"&select="+this.select);
				}
			},
    selectIce(index){
      this.selectIndex = index
      this.select = index
      uni.setNavigationBarTitle({
          title: '第五部分:冷风柜'+(index+1)
      });
    },
    showPopup() {
      if (this.type != "") {
        this.type = "";
      } else {
        this.type = "top";
      }
    },
    getMessage() {
      let _that = this;
      uni.getStorage({
        key: "shopId-" + _that.shopId,
        success: res => {
          if (!res.data.sel) {
            _that.noMessage();
            return;
          }
          _that.question = res.data.sel;
          //Q16
          if(+_that.select == 0){
            if (_that.question[13].sel_data) {
              _that.sel_data[0] = _that.question[13].sel_data;
            } else {
              _that.sel_data[0].item = _that.question[13].item;
            }
            //Q17
            if (_that.question[14].sel_data) {
              _that.sel_data[1] = _that.question[14].sel_data;
            }
            //Q18
            if (_that.question[15].sel_data) {
              _that.sel_data[2] = _that.question[15].sel_data;
            }
            //Q19
            if (_that.question[16].sel_data) {
              _that.sel_data[3] = _that.question[16].sel_data;
            } else {
              _that.question[16].item.forEach((ele, index) => {
                let obj = {};
                obj.tp = ele.name;
                obj.name = "只填数字";
                obj.type = "number";
                obj.value = "";
                _that.sel_data[3][_that.select].item.push(obj);
              });
            }
          }
          

          //Q21
          if (_that.question[18].sel_data) {
            _that.sel_data[4] = _that.question[18].sel_data;
          } else {
            _that.sel_data[4][_that.select].item = _that.question[18].item;
          }
          //Q22
          if (_that.question[19].sel_data) {
            _that.sel_data[5] = _that.question[19].sel_data;
          }else {
            _that.sel_data[5][_that.select].item = [];
          }
          //Q23
          if (_that.question[20].sel_data) {
            _that.sel_data[6] = _that.question[20].sel_data;
          } else {
            _that.sel_data[6][_that.select].item = _that.question[20].item;
          }
          //Q24
          if (_that.question[21].sel_data) {
            _that.sel_data[7] = _that.question[21].sel_data;
          } else {
            _that.sel_data[7][_that.select].item = _that.question[21].item;
          }
          //Q25
          if (_that.question[22].sel_data) {
            _that.sel_data[8][_that.select].value = _that.question[22].sel_data.value;
          }
        },
        fail: res => {
          _that.noMessage();
        }
      });
    },
    noMessage() {
      let _that = this;
      uni.getStorage({
        key: "question",
        success: res => {
          _that.question = res.data;
          _that.sel_data[0][_that.select].item = _that.question[13].item;
          // _that.sel_data[1][_that.select].value = _that.question[14].value;
          // _that.sel_data[2][_that.select].value = _that.question[15].value;
          _that.question[16].item.forEach((ele, index) => {
            let obj = {};
            obj.tp = ele.name;
            obj.name = "只填数字";
            obj.type = "number";
            obj.value = "";
            _that.sel_data[3][_that.select].item.push(obj);
          });
          _that.sel_data[4][_that.select].item = _that.question[18].item;
          _that.sel_data[5][_that.select].item = _that.question[19].item;
          _that.sel_data[6][_that.select].item = _that.question[20].item;
          _that.sel_data[7][_that.select].item = _that.question[21].item;
          _that.sel_data[8][_that.select].item = _that.question[22].item;
        }
      });
    },
    radioChange(arr) {
      this.sel_data[arr[1]][this.select].value = +arr[0];
    },
    input(val, index) {
      if (index == 1) {
        this.sel_data[1][this.select].value = val;
      } else if (index == 2) {
        this.sel_data[2][this.select].value = val;
      } else {
        this.sel_data[8][this.select].value = val;
      }
    },
    input_in(arr) {
      this.sel_data[3][this.select].item[arr[1]].value = arr[0];
    },
    toYes() {
      this.toNext();
      this.index = 0;
      this.select++;
      this.getMessage();
      this.sel_data[0].push({
        type: "radio",
        item: [
          { id: 1, name: "是" },
          { id: 2, name: "否" }
        ],
        value: 2
      });
      this.sel_data[1].push({
        type: "input",
        item: [{ name: "层数", type: "number" }],
        value: "层数"
      });
      this.sel_data[2].push({
        type: "input",
        item: [{ name: "整型值", type: "number" }],
        value: ""
      });
      uni.getStorage({
        key: "question",
        success: res => {
          let select = []
          res.data[16].item.forEach((ele, index) => {
            let obj = {};
            obj.tp = ele.name;
            obj.name = "只填数字";
            obj.type = "number";
            obj.value = "";
            select.push(obj);
          });
          this.sel_data[3].push({
            type: "input_in",
            item: select
          });
        }
      });
    },
    toNo() {
      this.toNext();
      mixins.navigate(
        "../index/lixian_steps?shopId=" + this.shopId + "&catId=" + this.catId
      );
    },
    toNext() {
      //保存数据到缓存
      let _that = this;
      if (_that.index == 0) { //16
        if (_that.question[13].sel_data) {
          if (_that.question[13].sel_data[_that.select]) {
            _that.question[13].sel_data[_that.select] =
              _that.sel_data[0][_that.select];
          } else {
            _that.question[13].sel_data.push(_that.sel_data[0][_that.select]);
          }
        } else {
          _that.question[13].sel_data = [];
          _that.question[13].sel_data.push(_that.sel_data[0][_that.select]);
        }
      } else if (_that.index == 1) { //17
        if (_that.question[14].sel_data) {
          if (_that.question[14].sel_data[_that.select]) {
            _that.question[14].sel_data[_that.select] =
              _that.sel_data[1][_that.select];
          } else {
            _that.question[14].sel_data.push(_that.sel_data[1][_that.select]);
          }
        } else {
          _that.question[14].sel_data = [];
          _that.question[14].sel_data.push(_that.sel_data[1][_that.select]);
        }
      } else if (_that.index == 2) {//18
        if (_that.question[15].sel_data) {
          if (_that.question[15].sel_data[_that.select]) {
            _that.question[15].sel_data[_that.select] =
              _that.sel_data[2][_that.select];
          } else {
            _that.question[15].sel_data.push(_that.sel_data[2][_that.select]);
          }
        } else {
          _that.question[15].sel_data = [];
          _that.question[15].sel_data.push(_that.sel_data[2][_that.select]);
        }
      } else if (_that.index == 3) {
        _that.question[16].sel_data = _that.sel_data[3];
      } else if (_that.index == 4) {//第六部分 Q21
        if (_that.question[18].sel_data) {
          if (_that.question[18].sel_data[_that.select]) {
            _that.question[18].sel_data[_that.select] =
              _that.sel_data[4][_that.select];
          } else {
            _that.question[18].sel_data.push(_that.sel_data[4][_that.select]);
          }
        } else {
          _that.question[18].sel_data = [];
          _that.question[18].sel_data.push(_that.sel_data[4][_that.select]);
        }
      } else if (_that.index == 5) {//Q22
        _that.question[19].sel_data = _that.sel_data[5];
      } else if (_that.index == 6) {
        _that.question[20].sel_data = _that.sel_data[6];
      } else if (_that.index == 7) {
        _that.question[21].sel_data = _that.sel_data[7];
      } else if (_that.index == 8) {
        _that.question[22].sel_data = _that.sel_data[8];
      }
      uni.getStorage({
        key: "shopId-" + _that.shopId,
        success: res => {
          res.data.sel = _that.question;
          uni.setStorage({
            key: "shopId-" + this.shopId,
            data: res.data
          });
        },
        fail: res => {
          uni.setStorage({
            key: "shopId-" + this.shopId,
            data: {
              sel: _that.question
            }
          });
        }
      });
      // uni.setStorage({
      //   key: "question",
      //   data: _that.question
      // });
      if (_that.index == 7) {
        mixins.navigate("q26?shopId=" + this.shopId + "&catId=" + this.catId+"&select="+this.select);
      } else {
        _that.index++;
      }
    },
    getImg() {
      //获取图片
      let _that = this;
      uni.chooseImage({
        count: 99, //默认9
        sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: function(res) {
          console.log(res.tempFilePaths[0]);
          var imagePathArr = res.tempFilePaths;
          for (let i = 0; i < imagePathArr.length; i++) {
            //如果可以多选，就循环显示图片出来
            _that.sel_data[5][_that.select].item = []
            _that.sel_data[5][_that.select].item.push(imagePathArr[i]);
            uni.uploadFile({
              url: "http://caco.winhui.net/api/v1/upload/imgUpload",
              fileType: "file",
              filePath: imagePathArr[i],
              name: "photo[]",
              success: function(res) {
                console.log(i + ":" + JSON.parse(res.data).data[0]);
              },
              fail: function(res) {
                console.log(res);
              }
            });
          }
        }
      });
    },
    delImg(index) {
      this.sel_data[5].item.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.img {
  width: 40upx;
  height: 40upx;
  position: fixed;
  left: 520upx;
  top: 24upx;
  z-index: 999;
}
.but88box {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: #f7f7f7;
}
.but88 {
  margin: 40upx 32upx 102upx;
  height: 80upx;
  width: unset;
}

.u_p >>> .uni-popup {
  height: unset !important;
  border-radius: 8upx;
  padding: 0;
}
.ice >>> .uni-popup {
  border-radius: 0upx;
  top:88upx;
}

.ice_box {
  width: 100%;
}
.ice_it {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72upx;
  padding: 0 45upx 0 49upx;
}
.ice_it .ice_del {
  width: 32upx;
  height: 32upx;
  display: none;
}
.ice_it.active {
  background: #f1f1f1;
}
.ice_it.active .ice_del {
  display: block;
}
.ice_add {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 92upx;
}
.ice_add img {
  width: 40upx;
  height: 40upx;
  margin-right: 14upx;
}
.u_p >>> .uni-popup{height: unset !important;top:88upx;}
	.u_p_box p{line-height: 50upx;margin: 0 34upx;text-align: left;margin-bottom: 65upx;}
	p.u_p_back{overflow: hidden;width:210upx;height:48upx;margin:30upx 14upx 40upx;display: flex;align-items: center;justify-content: center;background:rgba(255,228,231,1);border-radius:0px 4upx 4upx 0px;}
	p.u_p_back:before{content: '';margin-left: -34upx;width: 36upx;height: 48upx;box-sizing: border-box;border: 24upx solid #fff;border-right-color: transparent;}
</style>